<template>
    <div class="star" :class="starType">
        <span class="star-item" :class="itemClass" v-for="(itemClass, index) in itemClasses" :key="index"></span>
    </div>
</template>

<script>
    const LENGTH = 5;
    const CLS_ON = 'on';
    const CLS_HALF = 'half';
    const CLS_OFF = 'off';

    export default {
        props:{
            size:{
                type:Number
            },
            // score:得分
            score:{
                type:Number
            }
        },
        computed:{
            starType(){
                return 'star-' + this.size
            },
            itemClasses(){
                let result = [];
                const score = Math.floor(this.score*2)/2;
                const  hasDecimal = score % 1 !== 0;
                const  integer = Math.floor(score);
                for (let i = 0; i < integer; i++){
                    result.push(CLS_ON);
                }
                if (hasDecimal) {
                    result.push(CLS_HALF);
                }
                while(result.length < LENGTH){
                    result.pusha(CLS_OFF);
                } 
                return result;
            }
        }
    }
</script>

